﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="NewRecipe.aspx.cs" Inherits="NewRecipe" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
   <%--   <script type="text/javascript" src="js/jquery-1.9.1.js"></script>--%>
    <%--<script src="Scripts/jquery.min.js" type="text/javascript"> </script>--%>
   <%--<script type="text/javascript" src="js/jquery-ui.js"></script>--%>
    <link href="js/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.validationEngine.js" type="text/javascript"></script>
    <script src="js/jquery.validationEngine-en.js" type="text/javascript"></script>
    <link rel="stylesheet" href="jquery/jRating.jquery.css" type="text/css" />
    <script type="text/javascript" src="jquery/jRating.jquery.js"></script>
    <script>

        $(document).ready(function () {
            jQuery(".form").validationEngine({ scroll: false, focusFirstField: false });
        });

        function getFile() {
            document.getElementById("<%=fImageUpload.ClientID%>").click();
            return false;
        }

        function confirmSearch() {
            if (confirm("Are you sure you want to search!"))
                return true;
            return false;
        }

        function readURL(input) {
            //alert(input);
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    document.getElementById("<%=Image2.ClientID%>").src = e.target.result;
                };
                reader.readAsDataURL(input.files[0]);
                return false;
            }
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
<%--<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
<ContentTemplate>--%>
<div style="text-align: center; margin-bottom:20px;">
                        <asp:Button ID="btnEdit" Text="Edit" runat="server" CssClass="save_button" Visible="false"
                            OnClick="btn_Click"></asp:Button>
                        <asp:Button ID="btnSave" Text="Save" runat="server" CssClass="save_button" Visible="false"
                            OnClick="btnInsertRecipe_Click" OnClientClick="return jQuery('.form').validationEngine('validate')"
                            CausesValidation="false" />
                        <asp:Button ID="btnDelete" Visible="false" OnClientClick="if (!confirm('Are you sure you want delete?')) return false;" CssClass="save_button" Text="Delete" runat="server"
                            OnClick="btnDelete_Click"></asp:Button>
                    </div>
    <div class="box02 clearfix">
                <div class="alpha01 clearfix">
                    <p class="mar_b15">
                        <img src="images/noImage.jpg" class="profile-pic" id="Image2" runat="server" alt="" width="225" height="225" />
                    </p>
                    <div class="basic" style="margin: 0 auto;" data-average="0" data-id="1">
                    </div>
                    <p class="img03">
                        <%--<a href="#">--%>
                        <%--<img src="images/btn_addphoto.jpg" alt="Add Photo" width="155" height="27" />--%>
                        <asp:Button ID="btnUpload" runat="server" Text="Add Photo" Width="155" Height="27"
                            Visible="false" OnClientClick="return getFile()" />
                        <%--   </a>--%>
                    </p>
                    <div class="share">
                        <%--<a id="lnkFacebook" runat="server" target="_blank" title="Share facebook" >
                            <img id="imgFB" width="30" height="30" src="images/icon-fb.png">
                        </a>--%>
                        <ul style="float:left; width:100%">
                        <li style="float:left; margin-right:5px ">
                         <a id="lnkFacebook" runat="server" target="_blank" >
                            <img ID="img1"  width="30" height="30" 
                        src="images/icon-fb.png" 
                              />
                        </a>
                        </li>
                        <li style="float:left; margin-right:5px ">
                            <a id="lnkGoogle" runat="server" target="_blank" ><img
                          src="https://www.gstatic.com/images/icons/gplus-32.png" width="30" height="30"  alt="Share on Google+"/></a>
                        </li>
                        <li style="float:left;margin-right:5px ">
                            <a id="lnkTwitter" runat="server"  target="_blank"><img src="images/twitter.png" width="30" height="30" /></a>
                        </li>
                        <li style="float:left;" >
                            <a id="lnkEmail" runat="server"  target="_blank"><img src="images/mail.png" width="30" height="30" /></a>
                        </li>
                   </div>
                    
                </div>
                
                <asp:Panel ID="panel1" Visible="false" runat="server">
                    <div class="beta01 clearfix">
                        <div style="margin-bottom: 15px">
                            <asp:TextBox runat="server" ID="txtRecipeName" MaxLength="50" placeholder="Recipe Name"
                                CssClass="validate[required] field-textbox"></asp:TextBox>
                        </div>
                        <%--<div class="bg04 clearboth">
                            <div class="bg07">
                                
                            </div>
                        </div>--%>
                        <div class="bg08 clearfix">
                            <div style="float:left;">
                                <p class="title02">
                                    Serving Size:</p>
                            </div>
                            <div style="float:left; margin-left:10px;">
                                <asp:TextBox runat="server" ID="txtServing" CssClass="validate[custom[onlyNumber]] field-serving"
                                    Width="50" MaxLength="5"></asp:TextBox>
                            </div>
                            <div style="float:left; margin-left:40px;">
                                <p class="title02">
                                    Total Time (min):</p>
                            </div>
                            <div style="float:left;margin-left:10px;">
                                <asp:TextBox runat="server" ID="txtCook" CssClass="validate[custom[onlyNumber]] field-serving"
                                    Width="50" MaxLength="5"></asp:TextBox>
                                <%--<input name="Serving size" type="text" size="5" />--%>
                            </div>
                        </div>


                        <p class="title02">
                            Description</p>
                        <div>
                            <asp:TextBox runat="server" ID="txtDescription" TextMode="MultiLine" CssClass="field-areatbox"
                                ></asp:TextBox>
                        </div>
                        <p class="title02">
                            Ingredients</p>
                        <div>
                            <p>
                                <asp:TextBox ID="txtIngredient" runat="server" TextMode="MultiLine" CssClass="field-areatbox"></asp:TextBox>
                            </p>
                        </div>
                        <p class="title02">
                            Directions</p>
                        <div>
                            <p>
                                <asp:TextBox ID="txtRecDirection" runat="server" TextMode="MultiLine" CssClass="field-areatbox"></asp:TextBox>
                            </p>
                        </div>
                        <div style="padding: 10px; font-size: 16px">
                            <input type="checkbox" id="Checkbox1" checked="true" runat="server" name="vehicle"
                                value="1" /><label style="margin-left:10px;">Share with others</label>
                        </div>
                    </div>
                </asp:Panel>
                <asp:Panel ID="panel2" Visible="true" runat="server">
                    <div class="beta01 clearfix">
                        <p class="title01">
                            <asp:Label runat="server" ID="lblRecipeName"></asp:Label>
                        </p>
                        <div class="border01 clearfix clear">
                            <div class="w30pc">
                                <div class="txt01">
                                            <p>
                                                Serving Size:</p>
                                 </div>
                                 <%--<div class="txt_bg">--%>
                                        <p>
                                            <asp:Label ID="lblServing" runat="server"></asp:Label>
                                        </p>
                                   <%-- </div>--%>
                                    </div>
                                    <div class="w30pc">
                                        <div class="txt01">
                                            <p>
                                                Total Time (min):</p>
                                        </div>
                                        <%--<div class="txt_bg">--%>
                                        <p>
                                            <asp:Label ID="lblTime" runat="server"></asp:Label>
                                        </p>
                                        <%--</div>--%>
                                    </div>
                                </div>
                         <p class="title02">
                            Description</p>
                        <div class="border01 clearfix clear">
                            <p>
                                <asp:Label ID="lblDescription" runat="server"></asp:Label>
                            </p>
                        </div>
                        <%--<div class="bg04 mar_b15 clearboth">
                            <div class="bg09">
                                <div class="bg10 clearfix">
                                    <p>
                                        <asp:Label ID="lblDescription" runat="server"></asp:Label>
                                    </p>
                                </div>
                            </div>
                        </div>--%>
                        <p class="title02">
                            Ingredients</p>
                        <div class="border01 clearfix clear">
                            <%--<div class="bg12 clearfix">--%>
                                <p>
                                    <asp:Label ID="lblIngredient" Width="100%" runat="server" CssClass="mar_b12 label-over"></asp:Label>
                                </p>
                            <%--</div>--%>
                        </div>
                        <%-- <div class="bg04 mar_b15 clearboth">
                        <div class="bg11">
                            <div class="bg12 clearfix">
                               
                            </div>
                        </div>
                    </div>--%>
                        <p class="title02">
                            Directions</p>
                        <div class="border01 clearfix clear">
                           <%-- <div class="bg12 clearfix">--%>
                                <p>
                                    <asp:Label ID="lblRecDirection" Width="100%" runat="server" CssClass="mar_b12 label-over"></asp:Label>
                                </p>
                            <%--</div>--%>
                        </div>
                        <%-- <div class="bg04 clearboth">
                        <div class="bg13">
                            <div class="bg14 clearfix">
                                <p>
                                <asp:Label ID="lblRecDirection" runat="server"  CssClass="mar_b12" ></asp:Label>
                                </p>
                            </div>
                        </div>
                    </div>--%>
                        <div style="font-size: 16px">
                            <input type="checkbox" id="chIsPublish" disabled="true" checked="true" runat="server"
                                name="vehicle" value="1" /><label style="margin-left:10px;">Share with others</label>
                        </div>
                    </div>
                </asp:Panel>
        <div id="fb-root">
        </div>
        <script>            (function (d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) return;
                js = d.createElement(s); js.id = id;
                js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=208238106017076";
                fjs.parentNode.insertBefore(js, fjs);
            } (document, 'script', 'facebook-jssdk'));
            function getUrlVars() {
                var vars = [], hash;
                var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
                for (var i = 0; i < hashes.length; i++) {
                    hash = hashes[i].split('=');
                    vars.push(hash[0]);
                    vars[hash[0]] = hash[1];
                }
                return vars;
            }
        </script>
        <div id="mycomment" style="float:right">
            <%--<div class="fb-comments" data-href="" data-width="400" data-numposts="10" data-colorscheme="light"></div>--%>
        </div>
        <script>
            //alert(getUrlVars()["RecipeId"]);
            if (getUrlVars()["RecipeId"] != null) {
                var elemDiv = document.getElementById("mycomment");
                var markup = '';
                var widthWin =( $(window).width()-200) * 70 / 100;
                markup += '<div class="fb-comments" data-href="' + location.href + '" data-num-posts="10" data-width="' + widthWin + '" style="margin-top:2em;"></div>';
                elemDiv.innerHTML = markup;
                FB.XFBML.parse(elemDiv);
            }
        </script> 
            </div>
           
    
    <div style="overflow: hidden; height: 0px; width: 0px;">
        <asp:FileUpload type="file" id="fImageUpload" runat="server" onchange="readURL(this);" />
    </div>
    <asp:HiddenField ID="hdImage" runat="server" />
    <asp:HiddenField ID="ratingStar" runat="server" />
    <script type="text/javascript">
        function Rating() {
            var userid = '<%=Session["Userid"]%>';
            //userid = "1";
            if (document.getElementById("<%=ratingStar.ClientID%>").value != "") {
                //alert(userid);
                $(".basic").attr('data-average', document.getElementById("<%=ratingStar.ClientID%>").value);
            } else {
                $(".basic").attr('data-average', '0');
            }
            if (userid != "") {
                var recipeID = getUrlVars()["RecipeId"];
                //alert(recipeID);
                $(".basic").jRating({
                    step: true,
                    length: 5,
                    decimalLength: 1,
                    onSuccess: function (element, rate) {
                        document.getElementById("<%=ratingStar.ClientID%>").value = rate;
                        if (recipeID != null)
                            submitRating(rate);
                    },
                    onError: function () {
                        alert('Error : please retry');
                    }
                });

            } else {
                $(".basic").jRating({
                    isDisabled: true
                });
            }
            //return false;
        }
        function submitRating(rate) {
            var recipeID = getUrlVars()["RecipeId"];
            $.ajax({
                type: "POST",
                url: "PIMService.asmx/Rating",
                data: "{'objectTypeID':'1','objectID':'" + parseInt(recipeID, 10) + "','rating':'" + parseInt(rate, 10) + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                },
                error: function (msg) { alert(msg.d); }
            });
        }

        function getUrlVars() {
            var vars = [], hash;
            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
            for (var i = 0; i < hashes.length; i++) {
                hash = hashes[i].split('=');
                vars.push(hash[0]);
                vars[hash[0]] = hash[1];
            }
            return vars;
        }


    </script>
    <asp:HiddenField ID="checkUser" runat="server" />
    <asp:HiddenField ID="hdLinkImage" runat="server" />
</asp:Content>

